<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.1.8.js" type="text/javascipt"></script>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    
<div class="out">
    <div class="top">
        vue实训
        <img src="images/aiwrap.png" />
    </div>
    <div class="text">
        <input type="text" v-modle="loginName" placeholder="请输入用户名"/>
    </div>
    <div class="text">
        <input type="text" v-modle="pwd" placeholder="请输入密码"/>
    </div>
    <div class="bottom" @click="login">
        登录
    </div>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                loginName:'',
                pwd:''
            },
            methods:{
                login(){

                    $.ajaxSetup({
                        contentType:"application/json;charset=utf-8"
                    });

                    var data = {'loginName': this.loginName, "pwd":this.pwd}

                    $.post("http://api.tutestudio.net/api/login", JSON.stringify(data),function(res){
                        if(res.code == 200){
                            alert('登录成功')
                            location.href = 'home.html'
                        }
                        else{
                            alert('登录失败')
                        }
                    })

        
                    //if(this.loginName == 'admin' && this.pwd == "111"){
                      //  alert('登录成功')
                    //}
                    //else{
                       // alert("登录失败")
                    //}
                }
            }
        })
        </Script>
</html>